<!-- 在svelte中以$:开头声明的变量都具有响应式。 -->
<script>
import { onMount,createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
     export let theme;
     export let echarts;
     export let options;
     export let className; //require
     export let styleOption; 
     let Ele;
     let style = styleOption ?? `width:10rem;height:10rem`
     $:instance=null;
     //  根据父级做响应式
    
     onMount(()=>{
        drawLine()
     })
     const drawLine = function(theme='default'){
        theme = ['default','dark','light'].includes(theme)?theme:'default'; 
        getEle();
     }
    //  获取dom 
     const getEle = ()=>{
           let elem = Ele?Ele:document.querySelector(`.${className}`);
           instance = echarts.init(elem,theme); 
           setOptionsFn(options);
     }  
     const setOptionsFn = function(option){
         option = option?option:{};
         if(Boolean(instance)){
            instance.setOption(option);
         }else{
            getEle();
         }
              
     }
     const resizeFn = function(){
           let time = null;
           return function(){
                time && clearTimeout(time); 
                time = setTimeout(()=>{
                     instance?.resize();
                },500)
           }
     }
     window.addEventListener('resize',resizeFn(),true);
    
</script>
<div bind:this={Ele} class={className}  style={style}></div>